/**
 * 手机号3-4-4分割组件
 * @author: minzhang
 * @update: 2016-11-28
 */

import React, { PropTypes } from 'react';
import { Input } from 'antd';

const CommonPhoneInput = React.createClass({
  getInitialState() {
		const value = this.props.value;
    return {
      value: value ? this.formatPhone(value) : '',
			len: value ? this.formatPhone(value).length : 0,
			posi: 0,
    };
  },
	componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value ? nextProps.value === nextProps.value.replace(/[^0-9]/g, '') ? this.formatPhone(nextProps.value) : nextProps.value : '';
      this.setState({value, len: value.length, posi: value.length});
    }
  },
	componentDidUpdate(e) {
		const ele = this.refs.input.refs.input;
		// 设置光标的位置
		ele === document.activeElement && this.state.posi && this.setCursorPosition(ele, this.state.posi);
	},
	formatPhone(value) {
		var arr = value.split(''); // 删除空格

		// 将字符串重新排列加入空格
		if (arr.length >= 3) {
			arr.splice(3, 0, ' ');
			if (arr.length >= 8) {
				arr.splice(8, 0, ' ');
			}
		}

		return arr.join('');
	},
	/*
	 * 设置input的光标位置
	 * param [DOMelement] ctrl input对象
	 * param [Number] pos 光标的位置
	 */
	setCursorPosition(ctrl, pos) {
		if (ctrl.setSelectionRange) {
			ctrl.focus();
			ctrl.setSelectionRange(pos, pos);
		} else if (ctrl.createTextRange) {
			var range = ctrl.createTextRange();
			range.collapse(true);
			range.moveEnd('character', pos);
			range.moveStart('character', pos);
			range.select();
		}
	},
  handleChange(e) {
		const target = e.target;
		let value = target.value;
		// 获取当前的光标位置
		let posi = target.selectionStart;
		
		// 将空格或非数字替换
		if (value.length > this.state.len && /[^0-9]/g.test(value.slice(posi - 1, posi))) {
			this.setState({
				posi: posi - 1,
				value: value.slice(0, posi - 1) + value.slice(posi, value.length),
			});
			return;
		}
		
		const len = value.length;
		const phoneReg = /^\d{1,3}$|^\d{3} \d{1,4}$|^\d{3} \d{4} \d{1,4}$/; // 手机号码3 4 4正则验证
		
		// 在长度为3和8的时候在后边插入一个空格
		if (value.length === 3 || value.length === 8) {
			value += ' ';
			posi += 1;
			
			if (len < this.state.len) { // 删除去掉空格，光标向前移一位
				value = value.slice(0, (value.length - 1));
				posi -= 1;
			} else {
				if (posi === 7) {
					posi -= 1;
				}
			};
		}

		// 删除空格时删除空格前的一个数字
		if (posi == 3 || posi == 8) {
			if (len < this.state.len) {
				value = value.slice(0, (posi - 1)) + value.slice(posi, value.length);
				posi -= 1;
			}
		}

		// 如果用户其中某个位置输入错误，删除其中一个字符，则使用正则将手机号重新格式化
		if (!phoneReg.test(value)) {
			var str = value.slice(0, 13).replace(/\s|[a-zA-Z]/g, ''), // 剔除用户主动选择的插入位置的字符和空格
					arr = str.split(''); // 删除空格

			// 将字符串重新排列加入空格
			if (arr.length >= 3) {
				arr.splice(3, 0, ' ');
				if (arr.length >= 8) {
					arr.splice(8, 0, ' ');
				}
			}

			value = arr.join('');
		}
		
		// 将新的长度赋值给历史长度
		this.setState({
			posi,
			value,
			len: value.length,
		});

		// 将value值暴露给onChange事件
    const onChange = this.props.onChange;
    onChange && onChange(value);
  },
  render() {
    return (
      <Input
				{...this.props}
        type="text"
        ref="input"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  },
});

CommonPhoneInput.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
};

export default CommonPhoneInput;